<template>
  <div class="user-info-head" @click="editCropper()">
    <img :src="user_img" alt="admin" class="img-circle img-lg" />
  </div>
  <el-dialog
    :title="$t('layout.modify_picture')"
    v-model="open"
    width="800px"
    append-to-body
    @opened="modalOpened"
    @close="closeDialog"
  >
    <el-row>
      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
        <!-- <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="true"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          @realTime="realTime"
          v-if="visible"
        ></vue-cropper> -->
      </el-col>
      <el-col :xs="24" :md="12" :style="{ height: '350px' }">
        <div class="avatar-upload-preview">
          <img :src="options.previews.url" alt="admin" :style="options.previews.img" />
        </div>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :lg="2" :md="2">
        <el-upload action="#" :show-file-list="false">
          <el-button size="small">
            {{ $t('common.choose') }}
            <el-icon class="el-icon--right"><Upload /></el-icon>
          </el-button>
        </el-upload>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script lang="ts" setup name="userAvatar">
import { useLoginStore } from '@/store/Login'
// import { VueCropper } from 'vue-cropper'
// import 'vue-cropper/dist/index.css'
const { user_img } = useLoginStore()
const open = ref(false)
const visible = ref(false)
//图片裁剪数据
const options = reactive({
  img: user_img, // 裁剪图片的地址
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 200, // 默认生成截图框宽度
  autoCropHeight: 200, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
  previews: {
    url: '',
    img: ''
  } //预览数据
})
/** 编辑头像 */
function editCropper() {
  open.value = true
}
/** 打开弹出层结束时的回调 */
function modalOpened() {
  visible.value = true
}
/** 实时预览 */
// function realTime(data: any) {
//   options.previews = data
// }
/** 关闭窗口 */
function closeDialog() {
  //   options.img = store.getters.avatar
  visible.value = false
}
</script>

<style lang="scss" scoped>
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}
/* image */
.img-circle {
  border-radius: 50%;
}
.img-lg {
  width: 120px;
  height: 120px;
}
.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
</style>
